<template>
	<view>
<!-- 		<view v-if="showTransition"  class="card1"
					:class="{ active: transitionCompleted }">
					<image  class="logo" src="../../static/logo1.png"></image>
		</view> -->
		<view>
			<!-- banner -->
			<image class="cover" src="../../static/cover.png" mode='widthFix' @click="goTo('../../subpkgs/home/materialSubmit/materialSubmit')"></image>
			<!-- 学业成绩 -->
			<view class="card">
				<view class="title-area">
					<view class="title">
						<image class="title-icon" src="../../static/learn.png"></image>
						<text class="title-text">学业成绩</text>
					</view>
					<button class="submit-button" size="mini" @click="submitScore">上传证明</button>
				</view>
				<view class="seperation"></view>
				<view v-if="studyScore">
					<view class="row">
						<uni-row >
							<uni-col :offset="1" :span="4" ><text class="prompt" >总学分：</text></uni-col>
							<uni-col :span="4" > <text class="score"> {{studyScore.allCredits}} </text> </uni-col>
							<uni-col :span="5" > <text class="prompt"> 有效学分： </text> </uni-col>
							<uni-col :span="4" > <text class="score">{{studyScore.validCredits}} </text> </uni-col>
						</uni-row>
					</view>	
					<view class="row">
						<uni-row>
							<uni-col :offset="1" :span="7"><text class="prompt"> 有效课程均绩:</text></uni-col>
							<uni-col :span="6"> <text class="score">{{studyScore.validGpa}}</text> </uni-col>
						</uni-row>
					</view>
				</view>
				<view v-else class="omit"> 
					未上传成绩证明
				</view>
				
				<view class="view-all" @click="goTo('../../subpkgs/home/studyDetail/studyDetail')">
					<text class="view-all-text">查看全部></text>
				</view>
			</view>
			<!-- 竞赛科研 -->
			<view class="card">
				<view class="title-area">
					<view class="title">
						<image class="title-icon" src="../../static/academic.png"></image>
						<text class="title-text">竞赛科研</text>
					</view>
					
					<button class="submit-button" size="mini" @click="submitAcademic()">上传证明</button>
				</view>
				<view class="seperation"></view>
				<view v-if="academicScore">
					<view class="row">
						<uni-row>
							<uni-col :offset="1" :span="5"><text class="prompt"> 总加分项：</text></uni-col>
							<uni-col :span="1"><text class="prompt"> 共</text></uni-col>
							<uni-col :span="2" style="text-align: center;"> <view class="score">{{academicScore.itemCnt}}</view></uni-col>
							<uni-col :span="2"><text class="prompt">项</text></uni-col>
						</uni-row>
					</view>
					<view class="row">
						<uni-row>
							<uni-col :offset="1" :span="5"><text class="prompt"> 总加分：</text></uni-col>
							<uni-col :span="1"><text class="prompt"> 共</text></uni-col>
							<uni-col :span="2" style="text-align: center;"> <view class="score">{{academicScore.itemDigit}}</view> </uni-col>
							<uni-col :span="2"><text class="prompt">分</text></uni-col>
						</uni-row>
					</view>
				</view>
				<view v-else class="omit">
					未上传学术竞赛证明
				</view>
				<view class="view-all">
					<text class="view-all-text" @click="goTo('../../subpkgs/home/competition/competition?type=scholar')">查看全部></text>
				</view>
			</view>
			<!-- 综合素质 -->
			<view class="card">
				<view class="title-area">
					<view class="title">
						<image class="title-icon" src="../../static/general.png"></image>
						<text class="title-text">综合素质</text>
					</view>
					
					<button class="submit-button" size="mini" @click="submitGeneral()">上传证明</button>
				</view>
				<view class="seperation"></view>		
				<view v-if="generalScore">
					<view class="row">
						<uni-row>
							<uni-col :offset="1" :span="5"><text class="prompt"> 总加分项：</text></uni-col>
							<uni-col :span="1"><text class="prompt"> 共</text></uni-col>
							<uni-col :span="2" > <view class="score">{{generalScore.itemCnt}}</view></uni-col>
							<uni-col :span="2"><text class="prompt">项</text></uni-col>
						</uni-row>
					</view>
					<view class="row">
						<uni-row>
							<uni-col :offset="1" :span="5"><text class="prompt"> 总加分：</text></uni-col>
							<uni-col :span="1"><text class="prompt"> 共</text></uni-col>
							<uni-col :span="2"> <view class="score">{{generalScore.itemDigit}}</view> </uni-col>
							<uni-col :span="2"><text class="prompt">分</text></uni-col>
						</uni-row>
					</view>
				</view>
				<view v-else class="omit">
					未上传综合素质证明
				</view>
				<view class="view-all">
					<text class="view-all-text" @click="goTo('../../subpkgs/home/competition/competition?type=comprehen')">查看全部></text>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				studyScore:null,
				academicScore:null,
				generalScore:null,
				transitionCompleted: false,
				showTransition :true,
			}
		},
		mounted() {
			setTimeout(() => {
				this.transitionCompleted = true;
				setTimeout(() => {
					this.showTransition = false;
				}, 0); // 调整显示过渡页面的时间
			}, 2000); // 调整动画执行的时间
		},
		async onLoad(config) {
			await this.$onLaunched;
			const status=uni.getStorageSync('status')
			if(status=='unbound'){
				uni.setStorageSync('status','');
				uni.navigateTo({
					url:'../../subpkgs/my/accountBinding/accountBinding'
				})
				
			}
			else{
				const API_BASE_URL = this.$ProjectConfig.API_BASE_URL;
				const this2 = this;
				wx.request({
					url: API_BASE_URL + '/user/getStudyScore',
					method: 'GET',
					header: {
					  'Content-Type': 'application/json',
					},
					data: {
					    user_id:uni.getStorageSync("user_id")
					},
					success: function(res) {
						console.log(res);
						this2.studyScore={
						
								allCredits:res.data.credits,
								validCredits:res.data.valid_credits,
								validGpa:res.data.valid_gpa
							
						}
					}
				});
				wx.request({
					url: API_BASE_URL + '/user/getAcademicScore',
					method: 'GET',
					header: {
					  'Content-Type': 'application/json',
					},
					data: {
					    user_id:uni.getStorageSync("user_id"),
						type:'scholar'
					},
					success: function(res) {
						console.log(res);
						this2.academicScore={
							itemCnt:res.data.competition_cnt,
							itemDigit:res.data.competition_scores
						}
					}
				})
				wx.request({
					url: API_BASE_URL + '/user/getAcademicScore',
					method: 'GET',
					header: {
					  'Content-Type': 'application/json',
					},
					data: {
					    user_id:uni.getStorageSync("user_id"),
						type:'comprehen'
					},
					success: function(res) {
						console.log(res);
						this2.generalScore={
							itemCnt:res.data.competition_cnt,
							itemDigit:res.data.competition_scores
						}
					}
				})
			}
		},
		computed:{
		   goTo:function(){
			   return function(url){
				   uni.navigateTo({
						url:url
					})
			   }
		   }
		},
		methods: {
			submitScore(){
			  let _this = this;
				uni.showModal({
					title: '提示',
					content: '请上传公共数据库成绩查询页面所有成绩截图，仅限上传一张截图',
					success: function (res) {
						if (res.confirm) {
							uni.showActionSheet({
								itemList: ['从聊天文件中选择', '从本机选择'],
								success: function (res) {
									if(res.tapIndex==0){
										_this.uploadChatFile('uploadScore')
									}
									else{
										_this.uploadLocalFile('uploadScore')
									}
								},
								fail: function (res) {
									uni.showToast({
										title: '上传选择失败',
										icon:'error',
										duration: 1000
									});
								}
							});
						}
					}
				});
			},
			submitGeneral(){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '请上传综合素质材料证明图片，包括社会实践、文体活动、学生干部、志愿活动等',
					success: function (res) {
						if (res.confirm) {
							uni.showActionSheet({
								itemList: ['从聊天文件中选择', '从本机选择'],
								success: function (res) {
									if(res.tapIndex==0){
										_this.uploadChatFile('uploadGeneral')
									}
									else{
										_this.uploadLocalFile('uploadGeneral')
									}
								},
								fail: function (res) {
									uni.showToast({
										title: '上传选择失败',
										icon:'error',
										duration: 1000
									});
								}
							});
						}
					}
				});
			},
			submitAcademic(){
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '请上传学术竞赛证明材料图片，包括论文、专利、竞赛、科创等',
					success: function (res) {
						if (res.confirm) {
							uni.showActionSheet({
								itemList: ['从聊天文件中选择', '从本机选择'],
								success: function (res) {
									if(res.tapIndex==0){
										_this.uploadChatFile('uploadAcademic')
									}
									else{
										_this.uploadLocalFile('uploadAcademic')
									}
								},
								fail: function (res) {
									uni.showToast({
										title: '上传选择失败',
										icon:'error',
										duration: 1000
									});
								}
							});
						}
					}
				});
			},
			uploadLocalFile(urlrear){
				      let _this = this;
				      const DEV = this.$ProjectConfig;
				      var url = DEV.API_BASE_URL + '/file/'+urlrear;
				      uni.chooseImage({
				        count: 1, //默认9
				        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				        sourceType: ['album', 'camera'], //从相册选择或者打开相机
				        success: function(res) {
						uni.showLoading({
							title:"正在努力计算中"
						})
				          uni.uploadFile({
				            url: url,
				            fileType: 'image',
				            filePath: res.tempFilePaths[0],
				            formData: {
				              user_id: uni.getStorageSync('user_id')
				            },
				            name: 'file',
				            success: uploadFileRes => {
							uni.hideLoading()
							if (uploadFileRes.statusCode === 200 && uploadFileRes.header['Content-Type'] === 'application/json') {
								
								// 安全地解析 JSON
								const result = JSON.parse(uploadFileRes.data);
								if(urlrear=="uploadScore")
								{
									_this.studyScore={
										allCredits:result.total_credits,
										validCredits:result.valid_credits,
										validGpa:result.gpa
									}
									uni.showToast({
										title:"成功"
									})
								}
								else if(urlrear=="uploadAcademic")
								{
									uni.setStorageSync("academicOCR",result)
									uni.navigateTo({
										url:'../../subpkgs/home/materialSubmit/materialSubmit'
									})
								}

							} else {
								// 处理非 JSON 响应
								uni.showToast({
									title:"请检查图片形式",
									icon:'error'
								})
							}

				            },
				            fail() {
				              uni.showToast({
									title: '上传图片失败！',
									icon:'error',
									duration: 1000
				              });
				            }
				          });
				        }
				      });
			},
			uploadChatFile(urlrear){
				const DEV = this.$ProjectConfig;
				var url = DEV.API_BASE_URL + '/file/'+urlrear;
				wx.chooseMessageFile({
				  count: 1,
				  type: 'image',
				  success (res) {
					console.log(res);
				    uni.uploadFile({
						url: url,
						filePath: res.tempFiles[0].path,
						formData: {
							user_id: uni.getStorageSync('user_id')
						},
						name: 'file',
						success: uploadFileRes => {
							if (uploadFileRes.statusCode === 200 && uploadFileRes.header['Content-Type'] === 'application/json') {
								// 安全地解析 JSON
								const result = JSON.parse(uploadFileRes.data);
								if(urlrear=="uploadScore")
								{
									_this.studyScore={
										allCredits:result.total_credits,
										validCredits:result.valid_credits,
										validGpa:result.gpa
									}
									uni.showToast({
										title:"成功"
									})
								}
								else if(urlrear=="uploadAcademic")
								{
									console.log(result)
								}
								// 后续处理...
							} else {
								// 处理非 JSON 响应
							}
						  },
						fail(err) {
						console.log(err)
						  uni.showToast({
							title: '上传图片失败！',
							icon:'error',
							duration: 1000
						  });
						}
				    });
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
.logo{
	width:500rpx;
	height:500rpx;
	border-radius: 50%;
}
.cover,.card{
	margin: 20rpx;
	width: calc(100% - 40rpx); /* 用 calc() 函数计算宽度，减去两倍的 margin 大小 */
	border-radius: 10rpx;
	box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2); 
	height:auto;
}
.card{
	padding:3rpx 5rpx;
}
.title-area{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width:100%;
}
.title{
	width:33%;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.title-icon{
	width:48rpx;
	height:48rpx;
	margin:20rpx;
}
.title-text{
	font-size: $uni-font-size-lg;
}
.submit-button{
	margin:10rpx;
	background-color: $uni-bg-color;
	width:25%;
	color: #FFF;
	font-size: $uni-font-size-base;
	padding:5rpx;
}
.seperation{
	background-color: #CCC;
	width:100%;
	height:1rpx;
	margin:4rpx 0rpx 10rpx 0rpx;
}
.score{
	color:$uni-bg-color;
	text-align: center;
	width:100%;
}
.view-all-text{
	color:$uni-bg-color;
}
.row{
	margin:20rpx 0rpx;
	font-size: $uni-font-size-base;
}
.view-all{
	margin:20rpx;
	font-size: $uni-font-size-base;
	display:flex;
	flex-direction: row-reverse;
	align-items: center;
}
.view-all text{
	color:#7e0909;
}
.omit{
	font-size: $uni-font-size-lg;
	color:#AAA;
	text-align: center;
}
.card1 {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		background-color: rgb(248,238,235);
		align-items: center;
		justify-content: center;
		font-size: 25px;
		font-weight: bold;
		cursor: pointer;
	}
 
	.card1::before,
	.card1::after {
		position: absolute;
		content: "";
		width: 20%;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25px;
		
		transition: all 2s;
	}
 
	.card1::before {
		background: linear-gradient(to bottom,#fff, pink);
		top: 0;
		right: 0;
		border-radius: 0 15px 0 100%;
	}
 
	.card1::after {
		background: linear-gradient(to bottom,#fff, pink);
		bottom: 0;
		left: 0;
		border-radius: 0 100% 0 15px;
	}
 
	.card1::before,
	.card1::after {
		width: 100%;
		height: 100%;
		border-radius: 15px;
		animation: expand 2s;
	}
 
	@keyframes expand {
		0% {
			width: 10%;
			height: 10%;
			border-radius: 15px;
		}
 
		/*  25% {
	    width: 20%;
	    height: 20%;
	    border-radius: 15px;
	  } */
		100% {
			width: 100%;
			height: 100%;
			border-radius: 15px;
		}
	}
	.card1:after {
		content: "欢迎来到花狮评";
		color: #FFF9FF;
	}
</style>
